<template>
	<el-container :direction="vertical" class="bg fixed">
		<!-- elcon 快捷键快速生成页面模板 -->
		<el-header height="70">
			<div class="logo">
				<img src="" alt="" />
			</div>
			<h1>盛邦山桥项目考试管理系统登录页</h1>
		</el-header>

		<el-container :direction="horizontal" class="content">
			<el-main class="content-body">
				<!-- elf 快速生成表单 -->
				<el-form
					class="margin-top-20"
					:model="form"
					ref="form"
					:rules="rules"
					label-width="120px"
					:inline="false"
					size="normal"
				>
					<el-form-item label="用户名：" prop="username">
						<el-input
							v-model="form.username"
							prefix-icon="el-icon-user"
						></el-input>
					</el-form-item>
					<el-form-item label="密码：" prop="userpassword">
						<el-input
							v-model="form.userpassword"
							prefix-icon="el-icon-lock"
							type="password"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" @click="onSubmit">登录</el-button>
						<router-link to="/register" class="float-right"
							>没有账号，请立即注册</router-link
						>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>

		<el-footer height="60px">
			<div class="slogan">
				<span>-</span>
				<span>学号硬本领，赢在软实力</span>
				<span>-</span>
			</div>
		</el-footer>
	</el-container>
</template>

<script>
import { setItem } from "@/utils/storage.js";
export default {
	data() {
		return {
			horizontal: "horizontal",
			vertical: "vertical",
			/* 提交的表单数据 form */
			form: {
				username: "",
				userpassword: "",
			},
			/* 正则验证使用的规则 验证 form 中的数据 */
			rules: {
				username: [
					{ required: true, trigger: "blur", message: "请输入用户名" }
				],
				userpassword: [
					{ required: true, trigger: "blur", message: "请输入密码" }
				],
			},
		}
	},
	methods: {
		onSubmit() {
			// 创建表单对象
			const formData = new FormData();
			// 将this.form 中的数据添加到表单对象中
			for (let key in this.form) {
				// 使用append(key,value)方法向表单中添加数据
				formData.append(key, this.form[key]);
			}
			// 提交数据 , 提交表单数据
			this.$axios({
				url: "/system/sqUserlogin/userLogin",
				method: "post",
				data: formData
			}).then(res => {
				console.log(res.data.data)
				if (res.data.code === 1) {
					// 登录成功
					this.$alert(res.data.msg, "登录")
					// 设置本地存储
					setItem("userInfo", res.data.data.userInfo);
					setItem("userRole", res.data.data.userRoleInfo[0]);
					setItem("token", res.data.data.Token);
					// 保存信息到vueX中的 userInfo, 解决不能同步刷新的问题
					this.$store.commit("userInfoMutation", res.data.data.userInfo);
					this.$store.commit("userRoleMutation", res.data.data.userRoleInfo[0]);
					// 登录成功跳转至首页
					this.$router.push("/");
					return;
				}
				// 注册失败, 弹出错误信息
				alert(res.data.msg)
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.bg {
	background-image: url(../../assets/images/bg.jpg);
	background-position: center; /* 背景图片位置 */
	background-size: 100% 100%; /* 背景图片大小 */
	background-repeat: no-repeat; /* 背景图片平铺 */
}
h1 {
	text-align: center;
	line-height: 70px;
}
.content {
	/* 本省已经是弹性盒子 */
	justify-content: center; /* 元素在主轴上居中 */
	align-items: center; /* 元素在交叉轴上居中 */
	.content-body {
		flex: 0 0 600px;
		background-color: rgba(33, 11, 100, 0.2);
		border: solid 2px rgb(152, 142, 247);
		box-shadow: 10px 10px 15px rgb(61, 41, 236);
	}
}
.slogan {
	text-align: right;
	line-height: 60px;
	font-size: 26px;
	letter-spacing: 0.5em; /* 文字间的距离 */
	margin-right: 30px;
}
</style>
